<template>
    <div class="discover-container">
        <!-- 导航栏 -->
        <TridentCustomNav>
            <template #default>发现</template>
        </TridentCustomNav>

        <div class="content-wrap">
            <div class="panel" v-for="(item, index) in menus" :key="index">
                <div class="left">
                    <i :class="`iconfont icon-${item.icon}`"></i>
                    <span class="title">{{item.title}}</span>
                </div>
                <div class="right"><i class="iconfont icon-youjiantou"></i></div>
            </div>
        </div>

    </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'

// 菜单
const menus = reactive([
    {
        title: '盆友圈',
        icon: 'pengyouquan'
    },
    {
        title: '视频号',
        icon: 'wechat-video'
    },
    {
        title: '直播',
        icon: 'zhibo'
    },
    {
        title: '扫一扫',
        icon: 'saoyisao'
    },
    {
        title: '听音乐',
        icon: 'yinle'
    },
    {
        title: '看一看',
        icon: 'kanyikan'
    },
    {
        title: '搜一搜',
        icon: 'souyisou1-copy'
    },
    {
        title: '附近',
        icon: 'fujin'
    },
    {
        title: '购物',
        icon: 'gouwu'
    },
    {
        title: '游戏',
        icon: 'youxi'
    }
])
</script>

<style scoped lang="scss">
page,
.discover-container {
    height: 100vh;
    .content-wrap {
        padding: 45px 0;
        .panel {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 50px;
            padding: 0 15px;
            background-color: #fff;
            border-bottom: 1px solid #efefee;
            &:last-child {
                border-bottom: none;
            }
            &:nth-child(1) .left .iconfont {
                color: aquamarine;
            }
            &:nth-child(2) .left .iconfont {
                color: #E8A552;
                font-size: 22px;
            }
            &:nth-child(3) .left .iconfont {
                color: #DD8C7B;
            }
            &:nth-child(4) .left .iconfont {
                color: #6AA5DC;
            }
            &:nth-child(5) .left .iconfont {
                color: #F8504F;
            }
            &:nth-child(6) .left .iconfont {
                color: #F4C51C;
            }
            &:nth-child(7) .left .iconfont {
                color: #E3595C;
            }
            &:nth-child(8) .left .iconfont {
                color: #408ABD;
            }
            &:nth-child(9) .left .iconfont {
                color: #E3595C;
            }

            .left {
                flex: 1;
                display: flex;
                align-items: center;
                .iconfont {
                    font-size: 26px;
                }
                .title {
                    padding-left: 15px;
                    color: #000;
                }
            }
            .right {
                width: 20px;
                .iconfont {
                    font-size: 14px;
                }
            }

        }
    }
}
</style>